<template>
    <div>
        <img src="@img/edit.jpg" alt="" class='w-[12vw] m-[0_auto] block mt-[30vw]'>

        <h2 class='text-(6vw #000 center) mt-[20vw]'>2024年国家信息化发展情况<br />网络调查问卷<br />（企业版）</h2>

        <div class='text-(#fff 4vw center) bg-[#2A82E4] w-[40vw] m-[0_auto] p-[10px_0] rounded-[1vw] cursor-pointer mt-[20vw]' @click="copyLink">复制链接</div>

        <p class='text-(#666 4vw center) mt-[6vw]'>请点击按钮复制链接后，<br />发送至PC端打开填写</p>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
let username = route.query?.username;
let qid = route.query?.qid;

const width = window.innerWidth;
const fontSize = width / 35.5;  // 设置字体大小为视口宽度的 5%（或根据需要调整）

// function unsecuredCopyToClipboard(text) {
//   const textArea = document.createElement("textarea");
//   textArea.value = text;
//   document.body.appendChild(textArea);
//   textArea.focus();
//   textArea.select();
//   try {
//     document.execCommand('copy');
//   } catch (err) {
//     console.error('Unable to copy to clipboard', err);
//   }
//   document.body.removeChild(textArea);
// }

const unsecuredCopyToClipboard = (text) => { const textArea = document.createElement("textarea"); textArea.value=text; document.body.appendChild(textArea); textArea.focus();textArea.select(); try{document.execCommand('copy')}catch(err){console.error('Unable to copy to clipboard',err)}document.body.removeChild(textArea)};

/**
 * Copies the text passed as param to the system clipboard
 * Check if using HTTPS and navigator.clipboard is available
 * Then uses standard clipboard API, otherwise uses fallback
 */
const copyLink = () => {
  const content = 'http://information.cacdb.cn:9999/login?type=fillList&username='+username+'&qid='+qid
  if (window.isSecureContext && navigator.clipboard) {
    navigator.clipboard.writeText(content).then(() => {
      ElMessage.success('复制成功')
    });
  } else {
    unsecuredCopyToClipboard(content);
    ElMessage.success('复制成功')
  }
};

const copyLink1 = () => {
    navigator.clipboard.writeText('http://localhost:48080/login?type=fillList&username='+username+'&qid='+qid).then(() => {
        ElMessage.success('复制成功')
    })
}


</script>